<template>
  <div id="login">
    <a-form
        :model="formState"
        name="basic"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 8 }"
        autocomplete="off"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
    >
      <a-form-item
          label="用户名"
          name="username"
          :rules="[{ required: true, message: '请输入你的用户名!' }]"
      >
        <a-input v-model:value="formState.username"/>
      </a-form-item>

      <a-form-item
          label="密码"
          name="password"
          :rules="[{ required: true, message: '请输入你的密码!' }]"
      >
        <a-input-password v-model:value="formState.password"/>
      </a-form-item>

      <a-form-item :wrapper-col="{ offset: 8, span: 8 }">
        <a-button type="primary" html-type="submit">登录</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<style scoped>
#login {
  margin-top: 300px;
}
</style>
<script lang="ts">
import {defineComponent, reactive, getCurrentInstance} from 'vue';
import axios from "axios";

interface FormState {
  username: string;
  password: string;
}

export default defineComponent({

  setup: function (props, ctx) {
    const {proxy} = getCurrentInstance()
    const formState = reactive<FormState>({
      username: 'jack',
      password: 'redballoon',
    });
    const onFinish = (values: any) => {
      proxy.$http('/api/admin/login', values, "POST").then(res => {
        console.log('Success:', res);
        this.alert("登录成功！")
      }).catch(err => {
        console.log(err);
      })
    };

    const onFinishFailed = (errorInfo: any) => {
      console.log('Failed:', errorInfo);
      this.alert("登录失败！")
    };
    return {
      formState,
      onFinish,
      onFinishFailed,
    };
  },
});
</script>

